<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添只饺子网站</title>
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../static/css/pingLun.css" th:href="@{/css/pingLun.css}"/>
</head>

<body th:background="@{/img/beijing.jpg}" background="../static/img/beijing.jpg"
      style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;"
>
<div id="home">
    <div class='ribbon'>
        <a href="index/index.html" th:href="@{index}"><span>首页</span></a>
        <a href="translate.html" th:href="@{translate}"><span>推荐</span></a>
        <a href="pingLun.html" th:href="@{pingLun}"><span>评论</span></a>
    </div>
</div>

<div class="comments">
    <div class="comment-wrap">
        <div class="photo">
            <div class="avatar" th:style="'background-image: url(img/touxiang.jpg)'"></div>
        </div>
        <div class="comment-block">
            <form id="commSearch" name="searchForm" style="width: 100%;height: 100%" method="get" th:action="@{/addPingLun}" target="_blank">
                <div class="name" data-hook="searchSuggest">
                    <label>
                        <input class="search-text fl" name="name" type="text"
                               placeholder="昵称"/>
                    </label>
                </div>
                <div class="content" data-hook="searchSuggest">
                    <label>
                        <input class="comment-text"  style="width: 100%;height: 100%" name="content" type="text"
                               placeholder="发布一个友善的评论"/>
                    </label>
                </div>
                <input type="submit" value="发布" style="position:relative;right:5px;bottom:5px;"/>
            </form>
        </div>
    </div>

    <div class="comment-wrap" th:each="item:${pingLunList}">
        <div class="photo">
            <div class="avatar" th:style="'background-image: url(img/touxiang.jpg)'"></div>
        </div>
        <div class="comment-block">
            <p class="comment-text" th:text="${item.content}">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Iusto temporibus iste nostrum dolorem natus recusandae incidunt voluptatum. Eligendi voluptatum ducimus
                architecto tempore, quaerat explicabo veniam fuga corporis totam reprehenderit
                quasi sapiente modi tempora at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?</p>
            <div class="bottom-comment">
                <div class="comment-date" th:text="${#dates.format(item.createdOn, 'dd.MM yyyy')}">23.5 2014</div>
                <ul class="comment-actions">
                    <li class="reply" th:text="${item.name}">Reply</li>
                </ul>
            </div>
        </div>
    </div>


</div>
</body>
</html>